import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h
} from 'snabbdom'

// 创建出patch函数
const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule // attaches event listeners
])

// 创建虚拟节点
const vnode1 = h(
  'a',
  { props: { href: 'http://huangjiangjun.top/blog', target: '_blank' } },
  '段子黄的博客'
)

const vnode2 = h('ul', { class: { box: true } }, [
  h('li', {}, 'Vue'),
  h('li', {}, 'React'),
  h('li', {}, 'Angular')
])

console.log(vnode2)

// 获取到挂载的容器
const container = document.getElementById('container')

// 让虚拟节点显示在真实的dom节点上
patch(container, vnode1)
patch(container, vnode2)
